<template>
    <div class="right-bar">
        <div class="rightbar-item">
            <div class="avatar-border">
                <img src="../../static/img/aa.jpg" alt="">
                <span class="iconfont icon-jiahao"></span>
            </div>
        </div>
        <div class="item-icon">
            <span class="iconfont icon-xin "></span>
            <p>18.0w</p>
        </div>
        <div class="item-icon">
            <span class="iconfont icon-chakantiezihuifu "></span>
            <p>18.0w</p>
        </div>
        <div class="item-icon">
            <span class="iconfont icon-huifucopy2 "></span>
            <p>18.0w</p>
        </div>
        <div class="rightbar-item">
            <div class="right-music" >
                <img src="../../static/img/aa.jpg" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {


    }
</script>

<style scoped>
    .right-bar{
        width: 80px;
        border: 1px red solid;
    }
    .right-bar .rightbar-item{
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
    }
    .avatar-border{
        height: 50px;
        width: 50px;
        border: 1px #fff solid;
        border-radius: 50%;
        position: relative;
        text-align: center;
    }
    .right-bar>.rightbar-item>.avatar-border img{
        width: 49px;
        height:49px;
        border-radius: 50%;
    }

    .avatar-border .icon-jiahao{
        color: #FE2C5A;
        position: absolute;
        top: 42px;
        left: 0;
        right: 0;
    }

    .right-bar .item-icon{
        height: 60px;
        text-align: center;
        padding-top: 12px;
    }
    .item-icon .iconfont{
        color: #fff;
        font-size: 30px;
    }
    .item-icon p{
        color: #fff;
        font-size: 14px;
        padding-top: 5px;
    }

    .rightbar-item .right-music{
        height: 54px;
        width: 54px;
        background-color: #2e2e2e;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: round 6s 0s linear infinite ;
    }

    .right-music img{
        height: 30px;
        width: 30px;
        border-radius: 50%;
    }

    @keyframes round {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

</style>